<template>
	<view class="custom_vertical_list" :class="isBrowser ? 'browser_top' : ''">
		<!-- #ifdef MP-WEIXIN -->
		<view class="custom_vertical_list_item" wx:for="(item, index) in listData" wx:key="'customVerticalListItem_' + index" v-if="listData.length > 0">
			<custom-vertical-list-swiper :item="item" :isBrowser="isBrowser" v-if="item.type === 'swiper'"></custom-vertical-list-swiper>
			<custom-vertical-list-rolltext :item="item" :isBrowser="isBrowser" v-if="item.type === 'rolltext'"></custom-vertical-list-rolltext>
			<custom-vertical-list-image-group :item="item.data" type="line" :imgStyle="item.style" v-if="item.type === 'imgGroup'"></custom-vertical-list-image-group>
			<custom-vertical-list-image-group :item="item.data" type="two" :imgStyle="item.style" v-if="item.type === 'imgGroup'"></custom-vertical-list-image-group>
			<custom-vertical-list-component-group-card :item="item" :isBrowser="isBrowser" v-if="item.type === 'componentGroupCard'"></custom-vertical-list-component-group-card>
			<custom-vertical-list-tabs :item="item.data" :tabIsFixed="item.isFixed" v-if="item.type === 'tabs'">
				<view slot="tabsContent" slot-scope="{ listItems }" class="tabs_content_slot" v-if="listItems.content && listItems.content.length > 0">
					<view wx:for="(listItem, listIndex) in listItems.content" wx:key="'list_' + listIndex">
						<custom-vertical-list-group-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'groupNews'"></custom-vertical-list-group-news>
						<custom-vertical-list-default-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'defaultNews'"></custom-vertical-list-default-news>
						<custom-vertical-list-default-imgnews
							:item="listItem"
							:isBrowser="isBrowser"
							v-if="listItem.type === 'defaultImgNews'"
						></custom-vertical-list-default-imgnews>
					</view>
				</view>
				<view slot="tabsContent" v-else class="tabs_content_slot nodata">
					<custom-vertical-list-nodata></custom-vertical-list-nodata>
				</view>
			</custom-vertical-list-tabs>
			<view v-if="item.type === 'list'" class="custom_vertical_list_item_content">
				<view wx:for="(listItem, listIndex) in item.content" wx:key="'list_' + listIndex">
					<custom-vertical-list-group-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'groupNews'"></custom-vertical-list-group-news>
					<custom-vertical-list-default-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'defaultNews'"></custom-vertical-list-default-news>
					<custom-vertical-list-default-imgnews :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'defaultImgNews'"></custom-vertical-list-default-imgnews>
				</view>
			</view>
		</view>
		<view class="custom_vertical_list_item nodata">
			<custom-vertical-list-nodata></custom-vertical-list-nodata>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="custom_vertical_list_item" v-for="(item, index) in listData" :key="'customVerticalListItem_' + index" v-if="listData.length > 0">
			<custom-vertical-list-swiper :item="item" :isBrowser="isBrowser" v-if="item.type === 'swiper'"></custom-vertical-list-swiper>
			<custom-vertical-list-rolltext :item="item" :isBrowser="isBrowser" v-if="item.type === 'rolltext'"></custom-vertical-list-rolltext>
			<custom-vertical-list-image-group :item="item.data" type="line" :imgStyle="item.style" v-if="item.type === 'imgGroup'"></custom-vertical-list-image-group>
			<custom-vertical-list-image-group :item="item.data" type="two" :imgStyle="item.style" v-if="item.type === 'imgGroup'"></custom-vertical-list-image-group>
			<custom-vertical-list-component-group-card :item="item" :isBrowser="isBrowser" v-if="item.type === 'componentGroupCard'"></custom-vertical-list-component-group-card>
			<custom-vertical-list-tabs :item="item.data" :tabIsFixed="item.isFixed" v-if="item.type === 'tabs'">
				<view slot="tabsContent" slot-scope="{ listItems }" class="tabs_content_slot" v-if="listItems.content && listItems.content.length > 0">
					<view v-for="(listItem, listIndex) in listItems.content" :key="'list_' + listIndex">
						<custom-vertical-list-group-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'groupNews'"></custom-vertical-list-group-news>
						<custom-vertical-list-default-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'defaultNews'"></custom-vertical-list-default-news>
						<custom-vertical-list-default-imgnews
							:item="listItem"
							:isBrowser="isBrowser"
							v-if="listItem.type === 'defaultImgNews'"
						></custom-vertical-list-default-imgnews>
					</view>
				</view>
				<view slot="tabsContent" v-else class="tabs_content_slot nodata">
					<custom-vertical-list-nodata></custom-vertical-list-nodata>
				</view>
			</custom-vertical-list-tabs>
			<view v-if="item.type === 'list'" class="custom_vertical_list_item_content">
				<view v-for="(listItem, listIndex) in item.content" :key="'list_' + listIndex">
					<custom-vertical-list-group-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'groupNews'"></custom-vertical-list-group-news>
					<custom-vertical-list-default-news :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'defaultNews'"></custom-vertical-list-default-news>
					<custom-vertical-list-default-imgnews :item="listItem" :isBrowser="isBrowser" v-if="listItem.type === 'defaultImgNews'"></custom-vertical-list-default-imgnews>
				</view>
			</view>
		</view>
		<view class="custom_vertical_list_item nodata">
			<custom-vertical-list-nodata></custom-vertical-list-nodata>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	name: 'custom-vertical-list',
	props: {
		listData: {
			type: Array,
			default() {
				return [];
			}
		},
		isBrowser: {
			type: Boolean,
			default() {
				return false;
			}
		}
	},
	data() {
		return {};
	},
	onLoad() {}
};
</script>

<style lang="less">
.custom_vertical_list {
	margin: 0 0 10rpx 0;
	padding: 90rpx 0 2rpx 0;
	&.browser_top {
		padding: 90rpx 0 112rpx 0;
	}
	.custom_vertical_list_item {
		/* margin: 10rpx 0; */
		padding: 0 20rpx;
		background-color: #ffffff;
		&.nodata{
			min-height: 400rpx;
		}
		.tabs_content_slot {
			min-height: 600rpx;
			&.nodata {
				line-height: 600rpx;
				font-size: 24rpx;
			}
		}
	}
}
</style>
